import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import axios from "axios";
//引入axios 才能用

export default new Vuex.Store({
  state: {
    list: [],
    age: 18,
    name: "小明",
  },
  mutations: {
    add(state, title) {
      state.list.push({
        id: new Date().getTime(),
        title,
        status: false,
      });
    },
    remove(state, id) {
      //   state.list.forEach((item, index) => {
      //     if (item.id == id) {
      //       state.list.splice(index, 1);
      //     }
      //   });
      //通过循环  找到要删的下标 把他删除

      state.list = state.list.filter((item) => {
        return item.id != id;
      });
      //把不删的数据全都留下来
    },

    setList(state, val) {
      state.list = val;
    },
    // 给list赋值的
  },
  actions: {
    getList(context) {
      // actions跟别人不一样第一个参数不再是state了 而是context context是上下文的意思 上下文代表了所在的环境 所在的环境就是整个vuex仓库 this.$store
      axios.get("./list.json").then((res) => {
        console.log(res);
        context.commit("setList", res.data.list);
        //action没有权利修改state 所以action在请求到数据之后 需要调用一个mutation来给list赋值
      });
    },
  },
  modules: {},
  getters: {
    finishedList(state) {
      let res = state.list.filter((item) => {
        return item.status == true;
      });
      return res;
    },
    // 已完成数据列表
    unList(state) {
      let res = state.list.filter((item) => {
        return item.status == false;
      });
      return res;
    },
    //未完成数据列表
  },
});
